<template>
  <el-dialog
    v-model="visible"
    :title="t('advancedSearch.title')"
    width="600px"
    :before-close="handleClose"
    class="advanced-search-dialog"
  >
    <el-form
      ref="searchFormRef"
      :model="searchForm"
      label-width="100px"
      class="search-form"
    >
      <!-- 文件名搜索 -->
      <el-form-item :label="t('advancedSearch.fileNameLabel')">
        <el-input
          v-model="searchForm.fileName"
          :placeholder="t('advancedSearch.fileNamePlaceholder')"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </el-form-item>

      <!-- 文件类型筛选 -->
      <el-form-item :label="t('advancedSearch.fileTypeLabel')">
        <el-select
          v-model="searchForm.fileType"
          :placeholder="t('advancedSearch.fileTypePlaceholder')"
          clearable
          multiple
          collapse-tags
          style="width: 100%"
        >
          <el-option :label="t('advancedSearch.fileTypes.image')" value="image">
            <el-icon><Picture /></el-icon>
            <span style="margin-left: 8px">{{ t('advancedSearch.fileTypes.imageDesc') }}</span>
          </el-option>
          <el-option :label="t('advancedSearch.fileTypes.video')" value="video">
            <el-icon><VideoPlay /></el-icon>
            <span style="margin-left: 8px">{{ t('advancedSearch.fileTypes.videoDesc') }}</span>
          </el-option>
          <el-option :label="t('advancedSearch.fileTypes.document')" value="document">
            <el-icon><Document /></el-icon>
            <span style="margin-left: 8px">{{ t('advancedSearch.fileTypes.documentDesc') }}</span>
          </el-option>
          <el-option :label="t('advancedSearch.fileTypes.spreadsheet')" value="spreadsheet">
            <el-icon><Grid /></el-icon>
            <span style="margin-left: 8px">{{ t('advancedSearch.fileTypes.spreadsheetDesc') }}</span>
          </el-option>
          <el-option :label="t('advancedSearch.fileTypes.pdf')" value="pdf">
            <el-icon><Document /></el-icon>
            <span style="margin-left: 8px">{{ t('advancedSearch.fileTypes.pdfDesc') }}</span>
          </el-option>
          <el-option :label="t('advancedSearch.fileTypes.archive')" value="archive">
            <el-icon><FolderOpened /></el-icon>
            <span style="margin-left: 8px">{{ t('advancedSearch.fileTypes.archiveDesc') }}</span>
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 文件大小范围 -->
      <el-form-item :label="t('advancedSearch.fileSizeLabel')">
        <div class="size-range">
          <el-input-number
            v-model="searchForm.minSize"
            :min="0"
            :max="searchForm.maxSize || undefined"
            :placeholder="t('advancedSearch.minSizePlaceholder')"
            controls-position="right"
            style="width: 120px"
          />
          <span class="range-separator">-</span>
          <el-input-number
            v-model="searchForm.maxSize"
            :min="searchForm.minSize || 0"
            :placeholder="t('advancedSearch.maxSizePlaceholder')"
            controls-position="right"
            style="width: 120px"
          />
          <el-select
            v-model="searchForm.sizeUnit"
            style="width: 80px; margin-left: 8px"
          >
            <el-option label="KB" value="KB" />
            <el-option label="MB" value="MB" />
            <el-option label="GB" value="GB" />
          </el-select>
        </div>
      </el-form-item>

      <!-- 修改时间范围 -->
      <el-form-item :label="t('advancedSearch.dateRangeLabel')">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="datetimerange"
          :range-separator="t('advancedSearch.dateRangeSeparator')"
          :start-placeholder="t('advancedSearch.dateRangeStartPlaceholder')"
          :end-placeholder="t('advancedSearch.dateRangeEndPlaceholder')"
          format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </el-form-item>

      <!-- 搜索范围 -->
      <el-form-item :label="t('advancedSearch.searchScopeLabel')">
        <el-radio-group v-model="searchForm.searchScope">
          <el-radio value="current">{{ t('advancedSearch.scopes.current') }}</el-radio>
          <el-radio value="all">{{ t('advancedSearch.scopes.all') }}</el-radio>
          <el-radio value="folder">{{ t('advancedSearch.scopes.folder') }}</el-radio>
        </el-radio-group>
        
        <!-- 指定文件夹选择 -->
        <el-select
          v-if="searchForm.searchScope === 'folder'"
          v-model="searchForm.targetFolderId"
          :placeholder="t('advancedSearch.targetFolderPlaceholder')"
          style="width: 100%; margin-top: 8px"
          clearable
        >
          <el-option
            v-for="folder in folderList"
            :key="folder.id"
            :label="folder.name"
            :value="folder.id"
          >
            <el-icon><Folder /></el-icon>
            <span style="margin-left: 8px">{{ folder.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 排序方式 -->
      <el-form-item :label="t('advancedSearch.sortByLabel')">
        <el-select
          v-model="searchForm.sortBy"
          :placeholder="t('advancedSearch.sortByPlaceholder')"
          style="width: 200px"
        >
          <el-option :label="t('advancedSearch.sortOptions.relevance')" value="relevance" />
          <el-option :label="t('advancedSearch.sortOptions.time_desc')" value="time_desc" />
          <el-option :label="t('advancedSearch.sortOptions.time_asc')" value="time_asc" />
          <el-option :label="t('advancedSearch.sortOptions.name_desc')" value="name_desc" />
          <el-option :label="t('advancedSearch.sortOptions.name_asc')" value="name_asc" />
          <el-option :label="t('advancedSearch.sortOptions.size_desc')" value="size_desc" />
          <el-option :label="t('advancedSearch.sortOptions.size_asc')" value="size_asc" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleReset">{{ t('advancedSearch.buttons.reset') }}</el-button>
        <el-button @click="handleClose">{{ t('advancedSearch.buttons.cancel') }}</el-button>
        <el-button type="primary" @click="handleSearch" :loading="searching">
          <el-icon><Search /></el-icon>
          {{ t('advancedSearch.buttons.search') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import {
  Search, Picture, VideoPlay, Document, Grid, FolderOpened, Folder
} from '@element-plus/icons-vue'

const { t } = useI18n()

// 组件属性
interface Props {
  modelValue: boolean
  currentFolderId?: number
}

// 组件事件
interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'search', searchParams: SearchParams): void
}

// 搜索参数接口
interface SearchParams {
  fileName?: string
  fileType?: string[]
  minSize?: number
  maxSize?: number
  sizeUnit: string
  dateRange?: [string, string]
  searchScope: string
  targetFolderId?: number
  sortBy: string
}

// 文件夹接口
interface FolderInfo {
  id: number
  name: string
  path: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  currentFolderId: undefined
})

const emit = defineEmits<Emits>()

// 响应式数据
const visible = ref(false)
const searching = ref(false)
const searchFormRef = ref()

// 搜索表单
const searchForm = reactive<SearchParams>({
  fileName: '',
  fileType: [],
  minSize: undefined,
  maxSize: undefined,
  sizeUnit: 'MB',
  dateRange: undefined,
  searchScope: 'current',
  targetFolderId: undefined,
  sortBy: 'relevance'
})

// 文件夹列表（模拟数据，实际应该从API获取）
const folderList = ref<FolderInfo[]>([
  { id: 0, name: '全部文件', path: '/' },
  { id: 1, name: '我的文档', path: '/documents' },
  { id: 2, name: '图片', path: '/images' },
  { id: 3, name: '视频', path: '/videos' }
])

// 监听显示状态
watch(() => props.modelValue, (newVal) => {
  visible.value = newVal
})

watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
})

// 处理搜索
const handleSearch = async () => {
  // 验证搜索条件
  if (!searchForm.fileName && 
      (!searchForm.fileType || searchForm.fileType.length === 0) &&
      !searchForm.dateRange &&
      searchForm.minSize === undefined &&
      searchForm.maxSize === undefined) {
    ElMessage.warning('请至少设置一个搜索条件')
    return
  }

  searching.value = true
  ElMessage.info(t('advancedSearch.messages.searchInProgress'))
  
  // 模拟搜索延迟
  setTimeout(() => {
    // 构建搜索参数
    const searchParams: SearchParams = {
      ...searchForm,
      // 如果是当前文件夹搜索，设置目标文件夹ID
      targetFolderId: searchForm.searchScope === 'current' ? props.currentFolderId : searchForm.targetFolderId
    }

    // 发送搜索事件
    emit('search', searchParams)
    
    // 关闭对话框
    visible.value = false
    
    ElMessage.success('搜索已开始')
  }, 1000)
}

// 重置表单
const handleReset = () => {
  Object.assign(searchForm, {
    fileName: '',
    fileType: [],
    minSize: undefined,
    maxSize: undefined,
    sizeUnit: 'MB',
    dateRange: undefined,
    searchScope: 'current',
    targetFolderId: undefined,
    sortBy: 'relevance'
  })
}

// 关闭对话框
const handleClose = () => {
  visible.value = false
}

// 暴露方法
defineExpose({
  show: () => { visible.value = true },
  hide: () => { visible.value = false }
})
</script>

<style lang="scss" scoped>
.advanced-search-dialog {
  .search-form {
    .size-range {
      display: flex;
      align-items: center;
      gap: 8px;

      .range-separator {
        color: #909399;
        font-weight: bold;
      }
    }

    .el-form-item {
      margin-bottom: 20px;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin: 0;
  padding: 20px 24px;
  border-radius: 8px 8px 0 0;

  .el-dialog__title {
    color: white;
    font-weight: 600;
  }

  .el-dialog__headerbtn {
    .el-dialog__close {
      color: white;
      font-size: 18px;

      &:hover {
        color: #f0f0f0;
      }
    }
  }
}

:deep(.el-dialog__body) {
  padding: 24px;
}
</style>
